<template>
	<div class="content-page">
		<div class="content-nav">
			<el-breadcrumb class="breadcrumb" separator="/">
				<el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>短视频管理</el-breadcrumb-item>
				<el-breadcrumb-item>短视频列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-main">
			<div class="filter-box">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="全部" name="first"></el-tab-pane>
					<el-tab-pane label="待审核" name="second"></el-tab-pane>
					<el-tab-pane label="审核通过" name="third"></el-tab-pane>
					<el-tab-pane label="审核驳回" name="fourth"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="filter-box">
				<el-form :inline="true" :model="filterForm" class="demo-form-inline">
					<el-form-item label="视频名称">
						<el-input v-model="filterForm.name" placeholder="视频名称"></el-input>
					</el-form-item>
					<el-form-item label="选择日期">
						<el-date-picker v-model="filterForm.time" type="datetimerange" placeholder="选择时间范围" format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-button type="primary" @click="onSubmitFun">查询</el-button>
				</el-form>
			</div>
			<div class="form-table-box">
				<el-table ref="multipleTable" :data="tabList[`${activeName}`][`tableData`]" style="width: 100%" border stripe
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="shortId" label="ID">
					</el-table-column>
					<el-table-column prop="shortName" label="视频名称">
					</el-table-column>
					<el-table-column prop="uploader" label="上传用户">
					</el-table-column>
					<el-table-column prop="telephone" label="用户手机">
					</el-table-column>
					<el-table-column label="视频状态">
						<template scope="scope">
							{{scope.row.status==1?"通过":(scope.row.status==0?'等待':'驳回')}}
						</template>
					</el-table-column>
					<el-table-column prop="created" label="创建时间">
					</el-table-column>
					<el-table-column prop="playTimes" label="播放次数">
						<template scope="scope">
							{{scope.row.playTimes?scope.row.playTimes:0}}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template scope="scope">
							<el-button size="small" @click="handleRowEdit(scope.$index, scope.row)">查看</el-button>
							<el-button size="small" type="danger" @click="handleRowDelete(scope.row.shortId)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page-box flex">
				<div class="page-box-l">
					<div class="page-box-l">
						<el-button @click="toggleSelection(1)">批量删除</el-button>
						<el-button @click="toggleSelection(2)">取消选择</el-button>
					</div>
				</div>
				<div class="flex-1">
					<el-pagination @current-change="handlePageChange" :current-page="tabList[`${activeName}`][`page`]" :page-size="10"
					 layout="total, prev, pager, next, jumper" :total="tabList[`${activeName}`][`total`]">
					</el-pagination>
				</div>

			</div>
		</div>
		<el-dialog title="详情" :visible.sync="dialogFormVisible" @close="closeDialog">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="视频名称">
					{{form.shortName}}
				</el-form-item>
				<el-form-item label="视频介绍">
					{{form.shortDesc}}
				</el-form-item>
				<el-form-item label="上传用户">
					{{form.uploader}}
				</el-form-item>
				<el-form-item label="用户手机">
					{{form.telephone}}
				</el-form-item>
				<el-form-item label="视频状态">
					{{form.status==1?"通过":(form.status==0?'等待':'驳回')}}
				</el-form-item>
				<el-form-item label="创建时间">
					{{form.created}}
				</el-form-item>
				<video-player class="video-player vjs-custom-skin" v-if="form.shortUrl" ref="videoPlayer" :playsinline="true"
				 :options="video_Config"></video-player>
			</el-form>
			<div slot="footer" class="dialog-footer" v-if="form.status==0">
				<el-button @click="reviewShortFun(2)">驳回</el-button>
				<el-button type="primary" @click="reviewShortFun(1)">通过</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getShortList,
		delShort,
		reviewShort
	} from '@/api/permission'
	import videoConfig from '@/assets/js/videoConfig'
	console.log(videoConfig)
	export default {
		data() {
			return {
				video_Config: videoConfig,
				activeName: 'first',
				multipleSelection: [],
				filterForm: {
					name: '',
					time: []
				},
				tabList: {
					'first': {
						tableData: [],
						page: 0,
						total: null
					},
					'second': {
						tableData: [],
						page: 0,
						total: null,
						status:0
					},
					'third': {
						tableData: [],
						page: 0,
						total: null,
						status:1
					},
					'fourth': {
						tableData: [],
						page: 0,
						total: null,
						status:2
					}
				},
				form: {
					shortName: '',
					shortDesc: '',
					shortId: '',
					shortUrl: '',
					telephone: '',
					created: ''
				},
				dialogFormVisible: false
			}
		},
		methods: {
			onSubmitFun(){
				let self = this
				let fliter = {
					shortName:self.filterForm.name
				}
				let tablist = self.tabList[self.activeName]
				tablist.page = 0
				if(self.filterForm.time.length){
					fliter.start =self.parserDate(new Date(self.filterForm.time[0]))
					fliter.end =self.parserDate(new Date(self.filterForm.time[1]))
				}
				self.getList(fliter)
			},
			p(s) {
			     return s < 10 ? '0' + s : s
			},
			parserDate(d){
				return d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
			},
			handlePageChange(val) {
				let self = this
				let tablist = self.tabList[self.activeName]
				tablist.page = val -1
				//保存到localStorage
				localStorage.setItem('userPage', this.page)
				localStorage.setItem('userFilterForm', JSON.stringify(this.filterForm));
				let fliter = {
					shortName:self.filterForm.name
				}
				if(self.filterForm.time.length){
					fliter.start =self.parserDate(new Date(self.filterForm.time[0]))
					fliter.end =self.parserDate(new Date(self.filterForm.time[1]))
				}
				this.getList(fliter)
			},
			handleRowEdit(index, row) {
				this.dialogFormVisible = true
				this.video_Config[`sources`][0].src = row.shortUrl
				this.form = row
			},
			handleRowDelete(categoryIdLists) {
				this.$confirm('确定要删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delShort({
						shortId: categoryIdLists
					}).then((response) => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.onSubmitFilter();
					})
				});
			},
			onSubmitFilter() {
				let self = this
				let tablist = self.tabList[self.activeName]
				tablist = {
					tableData: [],
					page: 0,
					total: null
				}
				this.getList()
			},
			getList(fliter) {
				let self = this
				let tablist = self.tabList[self.activeName]
				let page = tablist.page
				let data = {
					index: page, // 页码
					size: 10,
					status:tablist.status,
				}
				typeof fliter != 'undefined'?Object.assign(data,fliter):''
				getShortList(data).then((response) => {
					tablist.tableData = response.content
					tablist.page = response.currentPage + 1
					tablist.total = response.totalRecords
				})
			},
			toggleSelection(type) {
				let rows = this.multipleSelection
				if (type == 1 && rows.length) {
					let categoryIdLists = ''
					rows.forEach(row => {
						if (row) {
							categoryIdLists = categoryIdLists + row.shortId + ','
						}
					});
					this.handleRowDelete(categoryIdLists)
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleClick(tab,v) {
				let self = this 
				let tablist = self.tabList[self.activeName]
				self.onSubmitFilter()
			},
			closeDialog() {
				this.video_Config[`sources`][0].src = ''
			},
			reviewShortFun(type) {
				let self = this
				reviewShort({
					shortId: self.form.shortId,
					reviewResult: type
				}).then(res => {
					let msg = type == 1 ? '视频已通过' : '视频已驳回'
					self.$alert({
						type: 'success',
						message: msg
					})
					self.dialogFormVisible = false
					self.onSubmitFilter()
				})
			}
		},
		components: {

		},
		mounted() {
			this.getList();
		}
	}
</script>

<style scoped>

</style>
